<template>
    <view class="w100%] bg-[#F3F5F9] ">
        <z-paging :empty-view-img="'213'" :empty-view-error-text="`对不起,页面走丢了\n请刷新试试`" :empty-view-text="`暂无宠物请点击下方添加`"
            loading-more-no-more-text="" ref="paging" v-model="fampetlist" @query="queryList" :fixed="true" width="100%"
            height="100%">
            <template #top>
                <!-- 顶部滑动导航 -->
                <view class="px-[30rpx] pt-[20rpx]">
                    <scroll-view scroll-x class="whitespace-nowrap" show-scrollbar="false">
                        <view class="inline-flex gap-[20rpx]">
                            <view v-for="(item, index) in tabList" :key="index"
                                class="inline-block px-[40rpx] py-[16rpx] rounded-[100rpx]"
                                :class="currentTab == index ? 'bg-black text-white' : 'bg-white text-black'"
                                @click="changeTab(index)">
                                {{ item.name }}
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </template>
        

        <view calss="px-[40rpx] ">
            <view class=" wwww">
                <view v-for="(item,index) in fampetlist" :key="index" class="pt-[24rpx] flex flex-col justify-center items-center qwert bnm pb-[30rpx]">
                    <image :src="item.petAvatar" class="w-[88rpx] h-[88rpx] rounded-[50%]"></image>
                    <view class="flex align-center">
                        <view class="text-[28rpx] font-[500] font-[PingFang SC] text-[#000000]">{{item.petName}}</view>
                        <image  :src="item.petSex == 0 ? '/static/images/game_logo/man.png' : '/static/images/game_logo/woman.png'" class="w-[40rpx] h-[40rpx] ml-[12rpx]"></image>
                    </view>
                    <view class="text-[22rpx] flex text-[#666666] items-end mt-[12rpx]">
                        当前设备电量 | <battery class="w-[52rpx] h-[26rpx]" :size="2" :value="10"></battery>10%</view>
                    <view
                        class="bg-[#FFFFFF] h-[178rpx] w-[278rpx] flex flex-col  items-center rounded-[24rpx] mt-[18rpx]">
                        <view class="flex justify-center align-center pt-[16rpx] w-[228rpx] pb-[20rpx] "
                            style="border-bottom: 2rpx solid #F6F6F6">
                            <image src="@/static/images/img/fzz.png" class="w-[52rpx] h-[52rpx]"></image>
                            <view class="text-[24rpx] font-[500] text-[#666666] font-[ PingFang SC]">所属家庭</view>
                        </view>
                        <view class="flex justify-center mt-[24rpx] text-[28rpx] text-[#000000] font-[ PingFang SC]">
                            {{ item.familyName }}</view>
                    </view>
                    <view class="w-[220rpx] h-[60rpx] ">
                        <up-button
                            :customStyle="{
                                width: '220rpx',
                                height: '60rpx',
                                background: 'linear-gradient(180deg, #963BFF 5%, #4761F4 100%)',
                                color: '#ffffff',
                                borderRadius: '400rpx',
                                fontSize: '24rpx',
                                padding: '12rpx 62rpx'
                            }"
                            text="移动宠物"
                            @click="openMoveDialog(item.petId)"
                        ></up-button>
                    </view>
                </view>
            </view>

        </view>

        <!-- 移动宠物弹窗 -->
        <up-popup :show="showMoveDialog" @close="showMoveDialog = false" mode="bottom" :closeOnClickOverlay="true"
            :customStyle="{
            width: '650rpx',
            background: 'linear-gradient(180deg, rgba(230, 230, 250, 1) 0%, rgba(255, 255, 255, 1) 20%)',
            borderRadius: '60rpx 60rpx 0 0',
            padding: '40rpx 0'
        }">
            <view class="relative">
                <!-- 关闭按钮 -->
                <view class="absolute right-[30rpx] top-0" @click="showMoveDialog = false">
                    <text class="text-[40rpx] text-[#999]">×</text>
                </view>

                <!-- 弹窗标题 -->
                <view class="text-center text-[32rpx] font-[500] mb-[40rpx]">将宠物移动到哪个家庭呢?</view>

                <!-- 家庭列表 -->
                <view class="px-[40rpx]">
                    <view v-for="(item, index) in tabList" :key="index"
                        class="flex items-center py-[30rpx] border-b border-[#F6F6F6]"
                        :class="selectedFamily == index ? 'selected-family' : ''" @click="selectFamily(index)">
                        <image src="@/static/images/img/lfz.png" class="w-[52rpx] h-[52rpx] mr-[20rpx]"></image>
                        <text :class="selectedFamily == index ? 'text-[#4761F4]' : 'text-[#333]'">{{ item.name }}</text>

                        <!-- 选中标记 -->
                        <view v-if="selectedFamily == index" class="ml-auto">
                            <view
                                class="w-[40rpx] h-[40rpx] rounded-full bg-[#4761F4] flex items-center justify-center">
                                <text class="text-white text-[24rpx]">✓</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 确定按钮 -->
                <view class="px-[40rpx] mt-[60rpx]">
                    <up-button text="确定" :customStyle="{
            width: '100%',
            height: '90rpx',
            background: '#C0FF00',
            color: '#000000',
            borderRadius: '100rpx',
            fontSize: '32rpx',
            fontWeight: 'bold'
        }" @click="confirmMove"></up-button>
                </view>
            </view>
        </up-popup>
    </z-paging>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getFamilyList } from '@/api/home';
import { getfamPetList, movePet } from '@/api/petmanagement';
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();

const fampetlist = ref([]);
const paging = ref(null);
const tabList = ref([{ name: '全部家庭', id: 0 }]);
const currentTab = ref(0);

// 记录跳转参数
let jumpFamilyId = null;

// 获取家庭信息
const getFamilyListData = async () => {
    const params = { uid: userStore.userId };
    const res = await getFamilyList(params);
    let list = [{ name: '全部家庭', id: 0 }];
    if (res.code == 200 && res.rows && res.rows.length > 0) {
        list = [
            { name: '全部家庭', id: 0 },
            ...res.rows.map(item => ({
                name: item.name,
                id: item.id
            }))
        ];
    }
    tabList.value = list;
};

// 设置当前tab
function setTabByFamilyId(familyId) {
    if (familyId && tabList.value.length > 0) {
        const idx = tabList.value.findIndex(item => String(item.id) == String(familyId));
        currentTab.value = idx !== -1 ? idx : 0;
    } else {
        currentTab.value = 0;
    }
}

// 页面加载
onLoad(async (options) => {
    jumpFamilyId = options.familyId || null;
    await getFamilyListData();
    setTabByFamilyId(jumpFamilyId);
    paging.value && paging.value.reload();
});

// 查询宠物列表
const queryList = async (pageNum, pageSize) => {
    try {
        const params = {
            pageNum,
            pageSize,
            uid: userStore.userId,
            familyId: tabList.value[currentTab.value]?.id || ''
        };
        const { rows } = await getfamPetList(params);
        paging.value.complete(rows);
    } catch (e) {
        paging.value.complete(false);
    }
};

// 切换标签页
const changeTab = (index) => {
    currentTab.value = index;
    paging.value.reload();
};

// 弹窗相关数据
const showMoveDialog = ref(false);
const selectedFamily = ref(2); // 默认选中第三个家庭
const currentMovePetId = ref(null);

const openMoveDialog = (petId) => {
    currentMovePetId.value = petId;
    showMoveDialog.value = true;
};

const selectFamily = (index) => {
    selectedFamily.value = index;
};

const confirmMove = async () => {
    const familyId = tabList.value[selectedFamily.value]?.id;
    const petId = currentMovePetId.value;
    if (!petId || !familyId) {
        uni.showToast({
            title: '请选择宠物和目标家庭',
            icon: 'none'
        });
        return;
    }
    try {
        const res = await movePet({ petId, familyId });
        if (res.code == 200) {
            uni.showToast({
                title: '移动成功',
                icon: 'success'
            });
            showMoveDialog.value = false;
            paging.value.reload();
        } else {
            uni.showToast({
                title: res.msg || '移动失败',
                icon: 'none'
            });
        }
    } catch (e) {
        uni.showToast({
            title: '网络异常',
            icon: 'none'
        });
    }
};
</script>

<style scoped lang="scss">
.bnm {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
}

.wwww {
    padding-left: 40rpx;
    padding-right: 40rpx;
    width: 100%;
    margin-top: 42rpx;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28rpx 22rpx; //上右下左的间隙和marjin一样
}

.qwert {
    border-radius: 24rpx;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
    box-sizing: border-box;
    border: 2rpx solid #FFFFFF;
    box-shadow: 0rpx 4rpx 34rpx 0rpx rgba(0, 0, 0, 0.0215);
}

.selected-family {
    color: #4761F4;
}
</style>